<template>
  <dialog_item :dialogTitle="nowOption=='new'?$t('new_calendar'):$t('edit_calendar')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="calendarVisible" :dialogWidth="'30%'">
       <el-form
        ref="form"
        :model="content"
        label-position="top"
        size="mini"
        :rules="rules"
        >
        
        
        <el-row :gutter="24" >
          <el-col :span="20">
            <el-form-item :label="$t('from_calendar')"   prop="_calendarid">
              <el-select v-model="content._calendarid"  :placeholder="$t('placeholder_select')" style="width:100%" :disabled="nowOption=='change'?true:false">
                <el-option
                  v-for="cld in calendars.datas"
                  :key="cld.id"
                  :label="cld.name"
                  :value="cld.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          
          <el-col :span="20">
            <el-form-item :label="$t('copy_calendar')"    prop="name"
            >
              <el-input type="text" v-model="content.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item :label="$t('description')"   >
              <el-input type="textarea" :rows="1" v-model="content.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </dialog_item>
</template>

<script>
export default {
  props: ["visible","detail","nowOption"],

  created() {
    this.content={
      name:this.detail.name,
      _calendarid:this.detail.fromCalendarId ? this.detail.fromCalendarId:this.detail.id,
      remark:this.detail.remark,
    };
    this.originid=this.detail.id?this.detail.id:''
    this.$api.getDomainCalendars(
        { domainid: this.$route.query.domainid,currpage: 1, pagelines: 10000,data:{ name: "", }},
        {
          onSucess: resp => {
            this.calendars = resp.data.data;
          }
        }
      );
  },
  
  computed: {
    calendarVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch:{
    detail(newVal){
        this.content=JSON.parse(JSON.stringify(newVal))
      
    },
    
  },
  data() {
    return {
      calendars: [],
      content:{
        name:"",
        _calendarid:"",
        remark:"",
      },
      calendarType:"",
      contentPre:{},
      originid:'',//记录原来的id
      rules:{
        _calendarid:[
          { required: true, message: this.$t('item_required'), trigger: 'change'}
        ],
        name:[
          {required: true, message: this.$t('item_required'), trigger: 'blur'}
        ],
      }
    };
  },
  methods:{
    onBtnDialogClick(name){
      if(name=='save'){
        this.onCheckBtnClick('form')
      }else if(name=='cancel'){
        this.onCancleBtnClick()
      }
    },
    onCheckBtnClick(formName){
    this.$refs[formName].validate((valid) => {
      if(valid){
         if(this.detail.id){
        for(let i=0;i<this.calendars.datas.length;i++){
          if(this.content.name==this.calendars.datas[i].name &&this.detail.id !==this.calendars.datas[i].id){
            this.$message({
              showClose: true,
              message: this.$t('msg_calendar_exist'),
              type: "error"
            });
            return false;
          }
        }
         if(!this.content.name){
          this.$message({
            showClose: true,
            message: this.$t('msg_require_calendarName'),
            type: "error"
          });
          return false;
        }
        this.$api.updataCalendars(this.$route.query.domainid,this.originid, this.content,
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
                this.$message({
                  showClose: true,
                  message: this.$t('msg_save_success'),
                  type: "success"
                });
                this.calendarVisible=false;
                this.$emit("new-ok");
              } else {
                this.$message({
                  showClose: true,
                  message: resp.data.errmsg,
                  type: "error"
                });
              }
          }
        }
      );
      }else{
        if(!this.content.name||!this.content._calendarid){
          this.$message({
            showClose: true,
            message: this.content._calendarid?this.$t('msg_require_calendarName'):this.$t('msg_require_calendarId'),
            type: "error"
          });
          return false;
        }else{
          for(let i=0;i<this.calendars.datas.length;i++){
            if(this.content.name==this.calendars.datas[i].name){
              this.$message({
                showClose: true,
                message: this.$t('msg_calendar_exist'),
                type: "error"
              });
              return false;
            }
          }
        }
        this.$api.newCalendars(this.$route.query.domainid, this.content,
          {
            onSucess: resp => {
              if (resp.data.errcode == 0) {
                  this.$message({
                    showClose: true,
                    message: this.$t('msg_new_success'),
                    type: "success"
                  });
                  this.calendarVisible=false;
                  this.$emit("new-ok");
                } else {
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
            }
          }
        );
       }
      }
     })
    },
    onCancleBtnClick(){
      this.calendarVisible=false;
      this.$emit("new-ok");
    },
  }

};
</script>

<style>
</style>